<%namespace name="cp" file="../functions/cp.functions.mako"/>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description"
          content="A layout with a side menu that hides on mobile, just like the Pure website." />

    <title><%block name="title">Webpage</%block> &ndash; CherryBank</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css" />
    <link rel="stylesheet" href="${cp.url('/css/layouts/side-menu.css')}">

</head>
<body>
<div id="layout">
    <!-- Menu toggle -->
    <a href="#menu" id="menuLink" class="pure-menu-link">
        <!-- Hamburger icon -->
        <span />
    </a>
    <div id="menu">
        <div class="pure-menu pure-menu-open">
            <a class="pure-menu-heading" href="${cp.url('/')}">CherryBank</a>

            <ul>
                % if ctx is not None and ctx.has_key('login_link') and ctx['login_link'] is not None:
                    <li><a href="${ctx['login_link']['href']}">${ctx['login_link']['text']}</a></li>
                % endif

                % if ctx is not None and ctx.has_key('menuitems') :
                    % for menuitem in ctx["menuitems"]:
                        <li><a href="${menuitem.get('url')}">${menuitem.get('text')}</a></li>
                    % endfor
                % endif

                <%block name="menuitems" />
                <!--<li><a href="http://purecss.io/base/">Base</a></li>-->
                <!--<li><a href="http://purecss.io/grids/">Grids</a></li>-->
                <!--<li><a href="http://purecss.io/forms/">Forms</a></li>-->
                <!--<li><a href="http://purecss.io/buttons/">Buttons</a></li>-->
                <!--<li><a href="http://purecss.io/tables/">Tables</a></li>-->
                <!--<li><a href="http://purecss.io/menus/">Menus</a></li>-->

                <!--<li class="pure-menu-selected menu-item-divided">-->
                    <!--<a href="http://purecss.io/layouts/">Layouts</a>-->
                <!--</li>-->
                <!--<li><a href="http://purecss.io/customize/">Customize</a></li>-->
                <!--<li><a href="http://purecss.io/extend/">Extend</a></li>-->
                <!--<li><a href="http://blog.purecss.io/">Blog</a></li>-->
                <!--<li><a href="https://github.com/yui/pure/releases/">Releases</a></li>-->

                <!--<li class="menu-item-divided">-->
                    <!--<a href="http://yui.github.io/skinbuilder/?mode=pure">Skin Builder</a>-->
                <!--</li>-->
                <!--<li><a href="http://yuilibrary.com/">YUI Library</a></li>-->
                % if ctx is not None and ctx.has_key('logout_link') and ctx['logout_link'] is not None:
                    <li><a href="${ctx['logout_link']['href']}">${ctx['logout_link']['text']}</a></li>
                % endif
            </ul>
        </div>
    </div>

    <div id="main">
        ${self.body()}
    </div>
</div>

<script src="${cp.url('/js/ui.js')}"></script>


</body>
</html>
